<template>
  <!-- 底部导航信息栏 -->
  <div class="bottom-container">
    <div class="code-text">智选服务，务实生活</div>
    <img class="code" src="../assets/images/code.png" alt="">
    <nav class="navbar-box">
      <ul class="navbar" v-for="(navItem) in navItems" :key="navItem.id">
        <text style="margin-bottom: 1.48vh">{{navItem.title}}</text>
        <li class="item" v-for="item in navItem.list" :key="item.id">
          <router-link :to="item.path">{{ item.name }}</router-link>
        </li>
      </ul>
    </nav>
  </div>
</template>

<script>

export default {
  name: "BottomBar",  // 确保组件名一致
  components: {

  },
  setup() {
    const navItems = [
      {
        id: "1",
        title: '关于我们',
        list:[
          {name:"公司介绍", path: '/company-profile'},
          {name:"联系我们", path: ''},
          {name:"诚聘英才", path: ''}
        ],
      },
      {
        id: "2",
        title: '产品与服务',
        list:[
          {name:"人才招聘", path: ''},
          {name:"企业招聘", path: ''},
        ],
      },
      {
        id: "3",
        title: '使用与帮助',
        list:[
          {name:"账号注销", path: ''},
          {name:"防骗指南", path: ''},
          {name:"法律协议", path: ''},
          {name:"资质公示", path: ''}
        ],
      },
      {
        id: "4",
        title: '联系方式',
        list:[
          {name:"电话：400-128-1008",path: ''},
          {name:"客服中心", path: ''}
        ],
      },
    ];
    return {
      navItems,
    };
  },
};
</script>

<style scoped>
.bottom-container {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 26vh;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 -0.15625vw 0.5208vw  rgba(0, 0, 0, 0.05);
}
.code-text{
  position: absolute;
  top: 3.6vh;
  right: 14.427vw;
  font-size: 0.833vw;
  font-weight: 700;
  color: rgba(51, 51, 51, 1);
}
.code{
  position: absolute;
  right: 15vw;
  bottom: 4.8vh;
  width: 6.2vw;
}
.navbar-box{
  position: absolute;
  width: 41.875vw;
  height: 16vh;
  left: 10.9375vw;
  top: 3.6vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar{
  width: 6.77vw;
  height: 16vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 0.833vw;
  font-weight: 700;
  padding: 0;   /* 去除 ul 的默认 padding */
  margin: 0;    /* 去除 ul 的默认 margin */
  list-style-type: none;  /* 移除默认的列表项样式 */
}
.item{
  list-style-type: none;
  font-size: 0.729vw;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  margin-top: 0.74vh;
}
.item:hover {
  font-weight: 550;
}
.item a {
  text-decoration: none; /* 去掉下划线 */
  color: rgba(102, 102, 102, 1); /* 链接颜色 */
  display: block; /* 使链接占满整个列表项 */
}
</style>
